<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue组件</title>

  <script src="./js/vue2.js"></script>
</head>
<body>
  <div id="app">
    <input type="text" placeholder="请输入..." v-model="inputVal">
    <input type="button" value="添加" v-on:click="handleAddClick">
    <ul>
      <!-- <li v-for="item in list">{{item}}</li> -->
      <!-- 通过bind指令获取item的值传入组件, 简写为冒号 : -->
      <!-- 5. 在组件的模板中监听delete事件， 传入index -->
      <todo-item 
        v-for="(item, index) in list"
        :item="item" 
        :index="index"
        @delete="handleDeleteItem">
      </todo-item>
    </ul>
  </div>
</body>
</html>
<script>
  // 1. 全局组件
  // Vue.component("TodoItem", {
  //   // 通过props获取参数
  //   props: ['item'],
  //   // 模板里面的参数来自props
  //   template:"<li>{{item}}</li>",
  // })

  // 2. 局部组件
  var TodoItem = {
    props: ['item', 'index'],
    // 3. 在item上绑定点击事件
    template:"<li @click='handleDeleteItem'>{{item}}</li>",
    methods: {
      // 4. 点击事件在组件的methods中定义
      handleDeleteItem: function(){
        // 通过$emit()向外触发事件
        this.$emit('delete', this.index);
      }
    }
  }

  // vue实例
  var app = new Vue({
    el: '#app',
    data: {
      list: ['one', 'two', 'three'],
      inputVal: '',
    },
    // 注册组件
    components: {
      TodoItem: TodoItem,
    },
    methods: {
      handleAddClick: function(){
        this.list.push(this.inputVal);
        this.inputVal = '';
      },
      // 6. 在父组件中处理点击事件, 根据下标删除
      handleDeleteItem: function(index){
        this.list.splice(index,1);
      }
    }
  });
</script>
